<template>
  <div class="home">
	<el-container>
	  <el-header>
		<span class="huanying-info">欢迎您:{{ userName }}</span>
		<el-button type="danger" round @click="logout" class="logout-bt">退出</el-button>
	  </el-header>
	  <el-main>
		<SysUser></SysUser>
	  </el-main>
	</el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import SysUser from "@/views/SysUser.vue";
import { getUser,removeToken,removeUser } from "@/utils/auth.js";
import { logout } from "@/api/login";
import { Notification, MessageBox, Message } from 'element-ui'
export default {
  name: "Home",
  data(){
	  return {
		  userName : ""
	  }
  },
  methods:{
	  getUserInfo(){
		  this.userName = getUser();
	  },
	  logout(){
		  MessageBox.confirm(
		    '确认退出系统吗？',
		    '系统提示',
		    {
		      confirmButtonText: '确认',
		      cancelButtonText: '取消',
		      type: 'warning'
		    }
		  ).then(() => {
			  logout().then(res=>{
				//退出登录
				removeToken()
				removeUser()
				//调转到原来的页面
				this.$router.push({ path: "/login" });  
			  })
		  })
	  }
  },
  created() {
  	this.getUserInfo()
  },
  components: {
	SysUser
  }
};
</script>
<style lang="scss" scoped="scoped">
.el-header, .el-footer {
	background-color: #409EFF;
	color: white;
	text-align: center;
	line-height: 60px;
}
.huanying-info{
	float:left
}
.logout-bt{
	float:right
}
</style>
